<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header" style="margin-top: 50rpx;">
			<uni-nav-bar left-icon="back" left-text="返回" title="订单管理" color='#3b71d2' @clickLeft="back"></uni-nav-bar>
		</view>
		<!-- 订单列表 -->
		<view class="order">
			<view class="header">
				<view class="header_li" @tap='select_payed' :class="type==1?'active':''">
					查看已支付
				</view>
				<view class="header_li" @tap='select_pay' :class="type==0?'active':''">
					未支付
				</view>
			</view>
			<view class="li" v-for="(item,index) in order_data" :key='index'>
				<view class="top">
					<view class="time">
						日期：{{item.create_time}}
					</view>
					<view class="time" v-if="type==1">
						交易成功
					</view>
					<view class="time" v-if="type==0">
						待支付
					</view>
				</view>
				<view class="center">
					<view class="left">
						<image :src="item.goods_picture" mode=""></image>
					</view>
					<view class="right">
						<view class="title">
							定制圆领T恤
						</view>
						<view class="one">
							{{item.color_name}}，{{item.Serie_name}}，{{item.sku_name}}码
						</view>
						<view class="price">
							￥{{item.goods_money}}<text style="color: rgba(174,172,172,1); padding-left: 20rpx;">X{{item.num}}件</text>
						</view>
						<view class="price">
							<text style="color: rgba(174,172,172,1);letter-spacing:5rpx;padding-right: 20rpx;">实付总额</text>￥{{item.pay_money}}
						</view>
					</view>
				</view>
				<view class="fot" v-if="type==1" @tap="see_order(item.order_id)">
					查看订单
				</view>
				<view class="fot" v-if="type==0" @tap="see_buy(item.order_id)">
					请支付
				</view>
				<view class="row">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_data: [], //订单数据
				page_current: 1,
				type: 1,
			}
		},
		onLoad() {
			uni.startPullDownRefresh({
				success: () => {
					console.log(11)
				}
			})
			var uid = uni.getStorageSync('uid');
			this.getData({
				Uid: uid,
				Page: this.page_current,
				type: this.type
			});
		},
		methods: {
			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			see_order(order_id) {
				uni.navigateTo({
					url: '../see_order/see_order?order_id=' + order_id
				})
			},
			see_buy(order_id) {
				var uid = uni.getStorageSync('uid');
				this.infoprop('/Order/WaitPaytopay', 'POST', {
					order_id: order_id,
					Uid: uid
				}, (ress) => {

					if (ress.data.status == 0) {
						uni.showModal({
							showCancel: false,
							content: ress.data.msg
						});
						return false
					}
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": ress.data.data.param.appId, //公众号名称，由商户传入     
							"timeStamp": ress.data.data.param.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": ress.data.data.param.nonceStr, //随机串     
							"package": ress.data.data.param.package,
							"signType": ress.data.data.param.signType, //微信签名方式：     
							"paySign": ress.data.data.param.paySign //微信签名 
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: '支付成功！',
									icon: 'none'
								});
								uni.navigateTo({
									url: '../order/order'
								});
							}
						});
				})
			},
			select_payed() {
				this.type = 1;
				var uid = uni.getStorageSync('uid');
				this.getData({
					Uid: uid,
					Page: this.page_current,
					type: this.type
				});
			},
			select_pay() {
				this.type = 0;
				var uid = uni.getStorageSync('uid');
				this.getData({
					Uid: uid,
					Page: this.page_current,
					type: this.type
				});
			},
			//订单数据
			getData(data) {
				this.infoprop('/Order/OrderList', 'POST', data, (res) => {
					this.order_data = res.data.data;
					console.log(this.order_data)

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.order {
			.header {
				display: flex;

				.header_li {
					width: 50%;
					padding: rpx;
					text-align: center;
					color: #9da5a7;
					font-size: 35rpx;
				}

				.active {
					//background-color: #3b71d2;
					color: #3b71d2;
				}
			}

			.li {
				margin-top: 40rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.time {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(73, 72, 72, 1);
						line-height: 36px;
						padding: 0 20rpx;
					}
				}

				.center {
					display: flex;
					justify-content: space-around;
					border-top: 1rpx solid #EEEEEE;
					border-bottom: 1rpx solid #EEEEEE;
					padding: 30rpx 0;

					.left {
						image {
							width: 300rpx;
							height: 250rpx;
						}
					}

					.right {
						.title {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(73, 72, 72, 1);
							padding: 10rpx 0;
						}

						.one {
							font-size: 25rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(174, 172, 172, 1);
							padding: 10rpx 0;
						}

						.price {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(59, 113, 210, 1);
							letter-spacing: 5rpx;
							padding: 10rpx 0;
						}

					}
				}

				.fot {
					border: 1px solid rgba(59, 113, 210, 1);
					border-radius: 40rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(59, 113, 210, 1);
					width: 200rpx;
					padding: 10rpx 0;
					text-align: center;
					margin-left: 65%;
					margin-top: 20rpx;
				}

				.row {
					height: 10rpx;
					background: rgba(238, 238, 238, 1);
					border-radius: 1px;
					margin-top: 50rpx;
				}
			}
		}
	}
</style>
